<template>
<div>
    <i-form ref='myForm' :dataForm='dataForm'>
        <template  #cus_template="{ obj }">
            <div class='cus_template'>
                <a-input  v-model:value="dataForm.form[obj.field]" :placeholder="obj.label"  class="i-form-item"/>
                <a-button type="primary">关联数据</a-button>
            </div>
        </template>
    </i-form>
    <lib-doc :libDocData="libDocData"></lib-doc>
</div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { IForm } from 'wd-platform-library'
import LibDoc from '@/components/LibDoc.vue'
import { LibDocInterface } from '@/service/LibDocService'
import { FormInterFace, FormDataInterFace } from 'wd-platform-library/lib/src/IForm/src/IFormInterFace'
interface DataFormInterFace {
    templateField:any;
}
export default defineComponent({
    name: 'i_from_demo',
    setup () {
        const myForm = ref()
        const dataForm: FormInterFace<DataFormInterFace> = reactive({
            labelWidth: 80, // 文本宽度
            form: {
                templateField: ''
            },
            fieldDataList: [
                {
                    type: 'template', // form表单类型
                    label: '自定义展示', // 字段描述信息
                    field: 'templateField', // form 对应字段
                    template: 'cus_template'
                }
            ]
        })
        const libDocData: LibDocInterface = {
            title: '代码示例',
            docList: [
                {
                    label: '引入组件',
                    type: 'pre',
                    value: `
        import { IForm } from 'wd-platform-library'
        import { FormInterFace, FormDataInterFace } from 'wd-platform-library/lib/src/IForm/src/IFormInterFace'
        <div>
            <i-form ref='myForm' :dataForm='dataForm'>
                <template  #cus_template="{ obj }">
                    <div class='cus_template'>
                        <a-input  v-model:value="dataForm.form[obj.field]" :placeholder="obj.label"  class="i-form-item"/>
                        <a-button type="primary">关联数据</a-button>
                    </div>
                </template>
            </i-form>
            <lib-doc :libDocData="libDocData"></lib-doc>
        </div> `
                },
                {
                    label: '创建表单对象',
                    type: 'pre',
                    value: `
        const dataForm: FormInterFace<DataFormInterFace> = reactive({
            labelWidth: 80, // 文本宽度
            form: {
                templateField: ''
            },
            fieldDataList: [
                {
                    type: 'template', // form表单类型
                    label: '自定义展示', // 字段描述信息
                    field: 'templateField', // form 对应字段
                    template: 'cus_template'
                }
            ]
        }) `
                }

            ]
        }

        return {
            libDocData,
            myForm,
            dataForm
        }
    },
    components: {
        IForm,
        LibDoc
    }
})
</script>

<style lang="scss" scoped>
.cus_template{
    display: flex;
}
</style>
